/**
 * 全局公用Dialog对话框组件
 * @example
 * <Dialog ref={e => (this.dialog = e)} />
 * this.dialog.show(opts)
 * this.dialog.hide()
 */
import React, {Component} from 'react';
import {Button, View, Text, StyleSheet, TextInput} from 'react-native';
import Dialog from 'react-native-dialog';

const defaultTitle = '提示';
const defaultCancelText = '取消';
const defaultConfirmText = '确定';
function noop() {}

const defaultState = {
  input: false,
  visible: false,
  title: defaultTitle,
  content: '',
  cancelText: defaultCancelText,
  confirmText: defaultConfirmText,
  handleCancel: noop,
  handleConfirm: noop,
};
export default class DialogComp extends Component {
  state = {
    ...defaultState,
  };
  // 这里设置标题、内容等参数
  show(opts = {}) {
    this.setState({
      ...defaultState,
      visible: true,
      ...opts,
    });
  }
  close() {
    this.setState({
      ...defaultState,
    });
  }
  onChangeText = text => {
    this.setState({
      content: text,
    });
  };
  render() {
    const {
      visible,
      input,
      placeholder,
      handleCancel,
      handleConfirm,
      title,
      content,
      cancelText,
      confirmText,
    } = this.state;
    return (
      <View style={styles.container}>
        <Dialog.Container visible={visible}>
          <Dialog.Title>{title}</Dialog.Title>

          {input ? (
            <Dialog.Input
              placeholder={placeholder}
              onChangeText={this.onChangeText}
              multiline
              numberOfLines={3}
              value={content}
            />
          ) : (
            <Dialog.Description>{content}</Dialog.Description>
          )}
          <Dialog.Button
            label={cancelText}
            onPress={() => {
              handleCancel && handleCancel();
              this.setState({visible: false});
            }}
          />
          <Dialog.Button
            label={confirmText}
            onPress={() => {
              handleConfirm && handleConfirm({content});
              this.setState({visible: false});
            }}
          />
        </Dialog.Container>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  containerStyle: {
    backgroundColor: 'red',
  },
  inputContainerStyle: {
    backgroundColor: 'red',
  },
});
